<template>
  <div>

    <div class="card" style="line-height: 30px; margin-bottom: 10px">
      <div>欢迎您，<span>{{user.username}}</span>， 祝您今天过得开心！</div>
    </div>

  </div>
  <div class="card" style="margin-bottom: 10px">


    <div class="block text-center" m="t-4" style="margin-top: 10px">
      <el-carousel trigger="click" height="450px" >
        <el-carousel-item v-for="item in arrImg" :key="item">
          <img :src="item" style="width: 100%; height: 100%;">
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style=" width:80%; margin: 30px auto">
      <div slot="header" class="clearfix" style="display: flex; justify-content: space-between">
        <div style="flex: 1; text-align: center; font-size: 25px; color: #737578">活动列表</div>
        <span style="width: 80px; text-align: right; cursor: pointer;color: #31a1ec" @click=" this.$router.push('activity')">查看更多</span>
      </div>
      <el-row>
        <el-col
            v-for="(item, index) in activityData"
            :key="item"
            :span="7"
            :offset="index % 3 > 0 ? 1 : 0"
        >
          <el-card :body-style="{ padding: '0px' }" style="margin-top: 20px;height: 385px">
            <img
                :src="item.picture || 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'"
                class="image"
                style="height: 400px"
            />
            <div style="padding: 14px">
              <span>{{ item.name }}</span>
              <div class="bottom">
                <div class="description">{{ item.description }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div style=" width:80%; margin: 30px auto">
      <div slot="header" class="clearfix" style="display: flex; justify-content: space-between">
        <div style="flex: 1; text-align: center; font-size: 25px; color: #737578">藏品列表</div>
        <span style="display: flex; justify-content: right; cursor: pointer;color: #31a1ec" @click="this.$router.push('collection')">查看更多</span>
      </div>
      <el-row>
        <el-col
            v-for="(item, index) in collectionData"
            :key="item"
            :span="7"
            :offset="index % 3 > 0 ? 1 : 0"
        >
          <el-card :body-style="{ padding: '0px' }" style="margin-top: 20px">
            <img
                :src="item.picture || 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'"
                class="image"
            />
            <div style="padding: 14px">
              <span>{{ item.name }}</span>
              <div class="bottom">
                <div class="description">{{ item.description }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div style=" width:80%; margin: 30px auto">
      <div slot="header" class="clearfix" style="display: flex; justify-content: space-between">
        <div style="flex: 1; text-align: center; font-size: 25px; color: #737578">纪念品列表</div>
        <span style="display: flex; justify-content: right; cursor: pointer;color: #31a1ec" @click="this.$router.push('goods')">查看更多</span>
      </div>
      <el-row>
        <el-col
            v-for="(item, index) in goodsData"
            :key="item"
            :span="7"
            :offset="index % 3 > 0 ? 1 : 0"
        >
          <el-card :body-style="{ padding: '0px' }" style="margin-top: 20px ; height: 348px">
            <img
                :src="item.picture || 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'"
                class="image"
            />
            <div style="padding: 14px; display: flex; justify-content: space-between; align-items: center;">
              <span>{{ item.name }}</span>
              <span>{{ item.price  }} $ </span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>


  </div>
</template>

<script>
  import request from "@/utils/request";
  import {ElMessage} from "element-plus";
  import collection from "@/views/manager/Collection.vue";
  import img1 from '@/assets/imgs/1.jpg';
  import img2 from '@/assets/imgs/2.jpg';
  import img3 from '@/assets/imgs/3.jpg';

  export default {
    name: "Home",
    computed: {
      collection() {
        return collection
      }
    },
    data() {
      return {
        fileList: [],
        users: {
          username: '',
        },
        user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
        arrImg:[
          img1,
            img2,
            img3
        ],
        pageNum: 1,
        pageSize: 3,
        activityData: [],
        collectionData: [],
        goodsData: [],

      }
    },
    mounted() {
      this.loadActivity();
      this.loadCollection();
      this.loadGoods();
    },
    methods: {
      loadActivity() { // 查询活动
        request.get('/activity/selectByPage', {
          params: { pageNum: this.pageNum, pageSize: this.pageSize}
        }).then(res => {
          if (res && res.data && typeof res.data === 'object') {
            this.activityData = res.data.list || [];
            console.log("活动数据:", this.activityData);
          } else {
            console.error("无效的响应数据:", res);

          }
        }).catch(err => {
          console.error("获取活动数据失败:", err);
        });
      },
      loadCollection() { // 查询藏品
        request.get('/collection/selectByPage', {
          params: { pageNum: this.pageNum, pageSize: this.pageSize}
        }).then(res => {
          if (res && res.data && typeof res.data === 'object') {
            this.collectionData = res.data.list || [];
            console.log("藏品数据:", this.collectionData);
          } else {
            console.error("无效的响应数据:", res);

          }
        }).catch(err => {
          console.error("获取藏品数据失败:", err);
        });
      },
      loadGoods() { // 查询纪念品
        request.get('/goods/selectByPage', {
          params: { pageNum: this.pageNum, pageSize: this.pageSize}
        }).then(res => {
          if (res && res.data && typeof res.data === 'object') {
            this.goodsData = res.data.list || [];
            console.log("纪念品数据:", this.goodsData);
          } else {
            console.error("无效的响应数据:", res);
            
          }
        }).catch(err => {
          console.error("获取纪念品数据失败:", err);
        });
      },


    },
  }
</script>

<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}
.description{
  font-size: 12px;
  color: #cb2140;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}


.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image {
  width: 100%;
  display: block;
  max-height: 300px;
  object-fit: contain;
}
</style>